<template>
  <div id="microhomepage">
    <c-title :hide="false" text="个人主页"></c-title>
    <div class="head-re">
      <div class="head-re-top"></div>
      <div class="head-re-content">
        <div>
          <img class="photo" :src="homepageData.avatar" alt="" />
          <div style="font-size: 1.0313rem;text-align: left;">{{ homepageData.nickname }}</div>
          <div style="display: flex;align-items: center;" @click="introductionInp" v-if="homepageData.is_own == 1">
            <template v-if="homepageData.signature"> {{ homepageData.signature }}</template>
            <template v-else>
              <span style="text-align: left;color:#999;margin-top: .25rem;">个性签名</span>
            <div class="b_right"><img src="../../assets/images/micro_communities/home_autograph@2x.png" /></div>
            </template>
          </div>
        </div>
        <div class="flex" style="margin-top: .75rem;">
          <div>
            <div class="fz-30">{{ homepageData.follow_num }}</div>
            <div class="fz-25 c-999" @click="gotoFanList()">关注</div>
          </div>
          <div class="fans">
            <div class="fz-30">{{ homepageData.fans_num }}</div>
            <div class="fz-25 c-999" @click="gotoFanList()">粉丝</div>
          </div>
          <div >
            <div class="fz-30">{{ homepageData.harvest_num }}</div>
            <div class="fz-25 c-999">获赞</div>
          </div>
        </div>
      </div>
      <div class="head-re-btn"  v-if="homepageData.is_own != 1">
        <van-button @click="attentionBtn" :color="homepageData.is_follow?'#F6F6F6':'var(--themeBaseColor)'" size="small" round block>
          <div slot="default" :class="homepageData.is_follow?'c-999':'c-fff'">
            <i v-if="homepageData.is_follow" class="iconfont icon-quxiao"></i>
            <i v-else  class="iconfont icon-guanzhu"></i>
            {{ homepageData.is_follow ? "取消关注" : "关注" }}
          </div>
        </van-button>
      </div>
    </div>
    <div class="display_page">
      <div v-if="homepageData.is_own != 1" class="page_nav_content">
        <ul class="nav_label" v-if="homepageData.trick_num">
          <li>全部帖子({{ homepageData.trick_num }})</li>
        </ul>
      </div>
      <template v-if="homepageData.is_own == 1">
        <van-sticky class="nav-tab">
          <van-tabs v-model="active" :ellipsis="false" @change="getClassificationBtn" style="background: #f9f5f5;" swipeable  >
            <van-tab  :title="'帖子(' + (homepageData.review_true_num || 0) + ')'"></van-tab>
            <van-tab :badge="homepageData.review_false_num||''" title="未审核帖子"></van-tab>
            <van-tab  :title="'赞过(' + (homepageData.praise_num || 0) + ')'"></van-tab>
            <van-tab title="消息" :badge="unread_num||''" ></van-tab>
          </van-tabs>
        </van-sticky>
      </template>
      <div class="message-box"  v-if="active==3">
        <div class="message-tips">
          <span>全部消息
            <template v-if="message_all>0">{{(message_all)}}</template></span><span @click="Alllink" :class="message_flag?'main-color':''">全部已读</span>
        </div>

        <div style="border-radius: 0.75rem;padding-bottom: 0.625rem;overflow: hidden;">
          <div v-for="(item,i) in message_list" :key="i" class="content " @click="link(item.stick.id,item.is_read)">
            <div class="content-header">
              <div style="position: relative;">
                <img :src="item.has_one_comment_user && item.has_one_comment_user.avatar_image" alt="">
                <div class="current-message" v-if="item.is_read==0"></div>
              </div>
              <div class="member-info">
                <div>{{item.uname}}{{item.major_cm_id==null?'评论了你的帖子':"回复你的评论"}}</div>
                <div class="c-a7a7a7">{{item.created_at}}</div>
              </div>
            </div>
            <div class="comment-content">{{item.content}}</div>
            <div class="content-title c-a7a7a7">
              {{item.stick.title}}
            </div>
            <div class="line" v-if="i+1!==message_list.length"></div>
          </div>
        </div>
      </div>
      <div class="video_list" v-if="active!==3">
        <c-flow
          :list="catelist_list"
          @loadMore="loadMore"
          @isclickfun="isclickfun"
          :showLoading="listloading"
          :isclick="isclick"
          :nowClick="homepageData.is_own == 1 && active == 1 ? true : false"
        ></c-flow>
      </div>
    </div>
    <van-popup v-model="mainCommentShow" position="bottom" :overlay="true">
      <div class="replyMainComment">
        <div class="left">
          <input type="text" v-model="maincomment" placeholder="请留下你的简介吧" />
        </div>
        <div class="right" @click="subMainBtn">发送</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import microhomepage_controller from "./microhomepage_controller";
export default microhomepage_controller;
</script>

  <style lang="scss" rel="stylesheet/scss" scoped>
  #microhomepage ::v-deep .van-tab--active .van-tab__text {
    color: var(--themeBaseColor);
  }
  #microhomepage ::v-deep .van-tabs__line {
    background-color: var(--themeBaseColor);
  }
#microhomepage ::v-deep .van-nav-bar__left .van-button {
  background-color: var(--themeBgColor);
}
#microhomepage ::v-deep .van-nav-bar {
  background-color: var(--themeBaseColor);
  border: none;
}
#microhomepage ::v-deep .van-nav-bar .van-icon {
  color: #000;
}

#microhomepage ::v-deep .van-nav-bar__title {
  color: #000;
}
#microhomepage {
  .main-color{
    color:var(--themeBaseColor);
  }
  .c-fff{
    color: #fff;
  }
  .c-999{
    color: #999;
  }
.head-re{
  background: var(--themeBaseColor);
  .head-re-btn{
    padding: .9375rem .75rem;
    background:#fff;
  }
  .fans{
    position: relative;
    padding: 0 2.0313rem;
    &::after{
      position: absolute;
      content: "";
      right: 15%;
      width: 1px;
      bottom: 10%;
      height: .5rem;
      background: #999;
    }
    &::before{
      position: absolute;
      content: "";
      left: 15%;
      width: 1px;
      bottom: 10%;
      height: .5rem;
      background: #999;
    }
  }
  .photo{
    width: 3.6875rem;
    height: 3.6875rem;
    border-radius: 100px;
    border:.1563rem solid #fff;
    position: relative;
    margin-top: -35%;
  }
  .b_right{
      width: 0.9rem;
      height: 0.9rem;

      img {
        width: 100%;
        height: 100%;
        display: block;
      }
  }
  .ml-65{
      margin-left: 2.0313rem;
    }
    .flex{
      display: flex;
    }
    .c-999{
      color: #999;
    }
    .fz-30{
      font-size: .9375rem;
    }
    .fz-24{
      font-size: .75rem;
    }
}
  .head-re-top{
    height: 2.625rem;
  }
  .head-re-content{
    background: #fff;
    border-radius: 0.75rem 0.75rem 0rem 0rem;
    padding:0 .75rem .75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .van-sticky,
  .nav-tab {
    position: relative;

    .tips {
      position: absolute;
      right: 0.65rem;
      top: 0.3125rem;
      background: #e43333;
      border-radius: 100px;
      text-align: center;
      padding: 0.01rem 0.4rem;
      color: #fff;
    }
  }

  .header {
    padding-top: 0.94rem;
    padding-bottom: 0.63rem;
    background-color: #fff;

    .header_content {
      width: 21.94rem;
      height: 6.25rem;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 0.5rem;
      box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.2);
      padding-left: 0.63rem;
      padding-right: 0.66rem;
      display: flex;
      justify-content: space-between;
      padding-top: 1.25rem;

      .header_left {
        width: 3.75rem;
        height: 3.75rem;
        margin-right: 0.66rem;

        img {
          border-radius: 50%;
          width: 100%;
          height: 100%;
        }
      }

      .headet_right {
        flex: 1;

        .headet_right_top {
          display: flex;
          justify-content: space-between;
          padding-bottom: 0.66rem;

          .name {
            font-size: 1rem;
            height: 1.63rem;
            line-height: 1.63rem;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 8rem;
            text-align: left;
          }

          .attention {
            width: 5rem;
            height: 1.63rem;
            background-color: #f15353;
            border-radius: 0.81rem;
            line-height: 1.63rem;
            font-size: 0.88rem;
            color: #fff;
          }
        }

        .headet_right_bottom {
          width: 100%;
          font-size: 0.88rem;
          line-height: 0.75rem;
          color: #999;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          text-align: left;
        }

        .bottom {
          display: flex;
          align-items: center;

          .b_left {
            color: #999;
            font-size: 0.88rem;
          }

          .b_right {
            width: 0.9rem;
            height: 0.9rem;

            img {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
        }
      }
    }
  }

  .display_page {
    .page_nav {
      background: #fff;
      border-bottom: 0.06rem solid #e5e5e5;

      ul {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 1.34rem;
        padding-right: 1.34rem;

        li {
          height: 2.5rem;
          line-height: 2.5rem;
          font-size: 1rem;
          display: flex;
          align-items: center;
        }
      }
    }

    .page_nav_content {
      .nav_label {
        background: #fff;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding-left: 0.75rem;
        padding-top: 0.63rem;
        padding-right: 0.75rem;

        li {
          background-color: #f9f9f9;
          border-radius: 0.75rem;
          height: 1.5rem;
          line-height: 1.5rem;
          font-size: 0.88rem;
          padding-left: 0.63rem;
          padding-right: 0.63rem;
          margin-bottom: 0.63rem;
          margin-right: 0.63rem;
        }
      }
    }

    .video_list {
      ul {
        margin-top: 0.5rem;
        display: flex;
        flex-wrap: wrap;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
        justify-content: space-between;

        li {
          border-radius: 0.38rem;
          width: 10.59rem;
          background-color: #fff;
          padding-bottom: 0.69rem;
          margin-bottom: 0.75rem;
          overflow: hidden;

          .top {
            min-height: 14.06rem;

            img {
              width: 100%;
            }
          }

          .bottom {
            padding-left: 0.59rem;

            .title {
              padding-top: 0.63rem;
              font-size: 0.84rem;
              line-height: 0.84rem;
              display: -webkit-box;
              text-overflow: ellipsis;
              overflow: hidden;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-align: left;
              margin-bottom: 0.59rem;
            }

            .content {
              display: flex;
              justify-content: space-between;

              .headmessage {
                display: flex;

                .left {
                  width: 1.13rem;
                  height: 1.13rem;
                  border-radius: 50%;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .name {
                  margin-left: 0.31rem;
                  height: 1.13rem;
                  line-height: 1.13rem;
                  text-align: left;
                  color: #8c8c8c;
                  font-size: 0.69rem;
                }
              }

              .thumbup {
                display: flex;
                padding-top: 0.16rem;

                .right {
                  width: 0.81rem;
                  height: 0.84rem;
                  margin-right: 0.38rem;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }

                .num {
                  min-width: 2rem;
                  max-width: 8rem;
                  text-align: left;
                  color: #333;
                  font-size: 0.75rem;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
            }
          }
        }
      }
    }
  }

  .replyMainComment {
    display: flex;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    padding-left: 1rem;

    .left {
      width: 18.13rem;
      height: 1.88rem;
      background-color: #f5f5f5;
      border-radius: 0.94rem;

      input {
        border: none;
        height: 100%;
        width: 100%;
        padding-left: 1rem;
      }
    }

    .right {
      width: 3rem;
      height: 1.88rem;
      font-size: 0.94rem;
      line-height: 1.88rem;
      color: #333;
    }
  }

  .message-box {
    .content {
      position: relative;
      text-align: left;
      background-color: #fff;
      padding: 1rem;
    }
    .line{
      position: absolute;
      left: 0;
      right: 0;
      height: 1px;
      background: #E7E7E7 ;
      bottom: 0;
    }
    .current-message {
      position: absolute;
      width: 0.6rem;
      height: 0.6rem;
      right: 0;
      top: 0;
      background-color: #e43333;
      border-radius: 100px;
    }

    .c-a7a7a7 {
      color: #a7a7a7;
    }

    .comment-content {
      margin: 0.5rem 0;
      color: #656565;
    }

    .content-title {
      padding: 0.5rem;
      background: #f8f8f8;
    }

    .member-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: left;
      margin-left: 0.5rem;
    }

    .message-tips {
      display: flex;
      justify-content: space-between;
      margin: 0.5rem;
    }

    .content-header {
      display: flex;
    }

    img {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 10rem;
      margin-left: 0;
      margin-right: 0;
    }
  }
}
</style>
